<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ isConfirm ? '盘点单确认':'盘点单详情' }}</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div>
          <div class="remark" v-if="remark">
            <div class="name" >
              <span>信息备注：</span>
              <span>{{ remark }} </span>
            </div>
          </div>
          <div>
            <div v-for="(link,index) in data" :key="index" class="input-box g-mb-10" id="link"
                 style="margin-top: 30px;">
              <div class="box">

                <div class="img_box">
                  <div>
                    <img :src="data[index].productPhoto" class="avatar" alt="tzs" v-if="data[index].productPhoto">
                    <p v-else>——</p>
                  </div>
                </div>
                <div class="right">
                  <div class="input_box">
                    <div class="name">
                      <span>商品名：</span>
                      <span>{{ data[index].productName ? data[index].productName : '--' }} </span>
                    </div>
                  </div>

                  <div class="sonData invent">

                    <div>
                      <el-input placeholder="数量" type="number" size="mini" disabled
                                min="0"
                                v-model="data[index].sourceNumber">
                        <template slot="prepend">原商品数</template>
                      </el-input>
                    </div>

                    <div>
                      <el-input placeholder="数量" type="number" size="mini" disabled class="last"
                                min="0"
                                v-model="data[index].sourceReturnNumber">
                        <template slot="prepend">原空桶数</template>
                      </el-input>
                    </div>

                    <div>
                      <el-input placeholder="数量" type="number" size="mini" disabled
                                min="0"
                                v-model="data[index].numbers">
                        <template slot="prepend">盘点商品数</template>
                      </el-input>
                    </div>


                    <div>
                      <el-input placeholder="空桶数" type="number" min="0" size="mini" disabled
                                v-model="data[index].returnNumber">
                        <template slot="prepend">盘点空桶数</template>
                      </el-input>
                    </div>


                    <div :class="parseFloat(data[index].numbersDifference) < 0 ? 'color' : ''">
                      <el-input placeholder="数量" type="number" size="mini" disabled
                                min="0"
                                v-model="data[index].numbersDifference">
                        <template slot="prepend">商品差值</template>
                      </el-input>
                    </div>
                    <div :class="parseFloat(data[index].returnNumberDifference) < 0 ? 'color' : ''">

                      <el-input placeholder="数量" type="number" size="mini" disabled
                                min="0"
                                v-model="data[index].returnNumberDifference">
                        <template slot="prepend">空桶差值</template>
                      </el-input>
                    </div>

                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="isConfirm" class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>



    </div>
  </div>
</template>

<script>
import {getDetail,confirmOrder} from "@/api/basic/warehouse/inventory";

export default {
  props: ['id', 'remark','isConfirm','confirmId'],
  data() {
    return {
      loading: false,
      data: {},
      test: '测试文字'
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      let that = this;
      this.loading = true;
      getDetail(that.id).then(res => {
        if (res) {
          that.data = res;
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },
    confirmEdit() {
      let that = this;
      that.$confirm('确定订单信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return confirmOrder({id: that.confirmId});
      }).then(() => {
        that.closePopup(1)
      }).catch(() => {
      });
    },
    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', refresh)
    },
  }
}
</script>
<style>
.color .el-input.is-disabled .el-input__inner {
  color: #ce0404 !important;
}

.invent .el-input-group__prepend {
  width: 60px !important;
}
</style>
<style scoped>
.box {
  display: flex;
  align-items: start;
}

.avatar {
  width: 70px;
  height: 70px;
  margin-right: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.remark {
  box-sizing: border-box;
  padding-left: 15px;
}
.name {
  height: 30px;
}

.sonData {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.sonData > div {
  width: 40%;
  margin-top: 5px;
}

.sonData > div:nth-of-type(2n) {
  margin-left: 20px;
}

.img_box {
  display: flex;
  align-items: center;
}
</style>
